<template>
  <div class="largeScreen">

    <div class="leftThreeSelect1 pt5">
      <div class="ppo"></div>
      <el-select v-model="leftThreeValue" placeholder="请选择" class="oop" :popper-append-to-body="false" @change="topD()">
        <el-option v-for="item in leftThreeOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="headerBox">
      <div class="frc pt30 pr20">
        <div class="flc tabsBox">
          <div class="tabsItemBg cur f14 fcc flex-1" :class="tabIdx == idx ? 'selectTabsItemBg' : ''"
            v-for="(item, idx) in tablist" @click="tabsFun(idx)">
            <div>{{ item.name }}</div>
            <div class="down_line"></div>
          </div>
        </div>
        <div class="fcc">
          <div class="flc ml20">
            <div class="cblue">{{ currentDate }}</div>
            <div class="cwhite ml20">{{ currentTime }}</div>
            <div class="cblue"></div>
          </div>
        </div>
      </div>
      <!-- 添加光束元素 -->
      <div class="light-beam"></div>
    </div>
    <div class="fcbc chartBox p20">
      <div class=" leftBox" style="height: 100%;">
        <div class="df dfBetween w100" style="height:49%">
          <div class="  flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">电量对比分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect pt8" style="position: relative;z-index: 89999;">
              <el-radio-group v-model="tabPosition" @change="one()">
                <el-radio-button label="1">年</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">日</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="dldbA">
                <div ref="barChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="  flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">电量损失分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect pt8 df" style="position: relative;z-index: 89999;">

              <el-select v-model="nianXlValue" placeholder="请选择" @change="two()" :popper-append-to-body="false"
                style="width: 90px;">
                <el-option v-for="item in nianXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-select v-model="yueXlValue" placeholder="请选择" @change="two1()" :popper-append-to-body="false"
                style="width: 70px;margin-left: 10px;">
                <el-option v-for="item in yueXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="dlssA">
                <div ref="pieChart" style="width: 100%; height: 78%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="  flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">等效时分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect pt8" style="position: relative;z-index: 89999;">
              <el-radio-group v-model="tabPosition1" @change="three()">
                <el-radio-button label="1">年</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">日</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="dxsA">
                <div ref="lineChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="  flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">功率预测与限电分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect pt8" style="position: relative;z-index: 89999;">
              <el-radio-group v-model="tabPosition2" @change="four()">
                <el-radio-button label="1">年</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
                <el-radio-button label="3">日</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="glycA">
                <div ref="glChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="df dfBetween w100" style="height:49%">
          <div class="   flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">能耗分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect pt8 df" style="position: relative;z-index: 89999;">

              <el-select v-model="nianXlValue1" placeholder="请选择" @change="five()" :popper-append-to-body="false"
                style="width: 90px;">
                <el-option v-for="item in nianXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-select v-model="yueXlValue1" placeholder="请选择" @change="five1()" :popper-append-to-body="false"
                style="width: 70px;margin-left: 10px;">
                <el-option v-for="item in yueXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="nhfxA">
                <div ref="nhChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="   flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">风速变化分析</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="tabSelect1 pt8" style="position: relative;z-index: 89999;">
              <el-radio-group v-model="tabPosition3" @change="six()">
                <el-radio-button label="1">年</el-radio-button>
                <el-radio-button label="2">月</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="fsbhA">
                <div ref="fsChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="  flc fv w1 rel w33" style="height:100%;display: none;">
            <div class="chartTile f16">
              <div class="pl40">风速频率与风能频率对比</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>

            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="fsplA">
                <div ref="plChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
          <div class="  flc fv w1 rel w33" style="height:100%">
            <div class="chartTile f16">
              <div class="pl40">风向玫瑰图</div>
              <!-- 添加两条光束 -->
              <div class="light-beam beam-1"></div>
            </div>
            <div class="tabSelect pt8 df" style="position: relative;z-index: 89999;">

              <el-select v-model="nianXlValue2" placeholder="请选择" :popper-append-to-body="false" style="width: 90px;"
                @change="seven()">
                <el-option v-for="item in nianXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-select v-model="yueXlValue2" placeholder="请选择" :popper-append-to-body="false" @change="seven1()"
                style="width: 70px;margin-left: 10px;">
                <el-option v-for="item in yueXl" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="flex-1 w1 fcbc fv">
              <div class="flex-1 w1 pt10" v-if="fxmgA">
                <div ref="fxChart" style="width: 100%; height: 80%;position: absolute;bottom: 5px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "cockpit",
  data() {
    return {

      dldbA: true,
      dlssA: true,
      dxsA: true,
      glycA: true,
      nhfxA: true,
      fsbhA: true,
      fsplA: true,
      fxmgA: true,


      activeIndex: 0, // 当前选中的索引
      hoverIndex: null, // 当前悬停的索引
      // 设备告警检测
      sbgj: {
        gjxx: 928,
        yxz: 456,
        lx: 225,
        jx: 43,
        gz: 22,
      },
      barChart: null,
      pieChart: null,
      lineChart: null,
      glChart: null,
      nhChart: null,
      fsChart: null,
      plChart: null,
      fxChart: null,

      nianXl: [{ name: '2025年', id: 1 }],
      yueXl: [{ name: '8月', id: 1 }, { name: '7月', id: 2 }, { name: '6月', id: 3 }, { name: '5月', id: 4 }, { name: '4月', id: 5 }, { name: '3月', id: 6 }, { name: '2月', id: 7 }, { name: '1月', id: 8 }],
      // 发电量上面三个的数据
      electricityData: {
        dr: 45646, // 当日
        dy: 345, // 当月
        dn: 2222, // 当年
      },
      currentDate: "",
      currentTime: "",
      dialogVisible1: false,
      dialogVisible: false,
      fenbuIdx: 1,
      tabPosition: 1,
      tabPosition1: 1,
      tabPosition2: 1,
      tabPosition3: 1,
      tabIdx: 4,
      tablist: [
        {
          name: "全景监视",
          path: "/operation",
        },
        {
          name: "监控大屏",
          path: "/monitoring",
        },
        {
          name: "驾驶舱总览",
          path: "/cockpit",
        },
        {
          name: "数据监测",
          path: "/detection",
        },
        {
          name: "智能分析",
          path: "/analysis",
        },
      ],
      topList: [
        {
          icon: require("@/assets/images/icon/icon-all-1.png"),
          name: "电场数量",
          num: "314",
          unit: "台",
        },
        {
          icon: require("@/assets/images/icon/icon-all-2.png"),
          name: "总装机容量",
          num: "314",
          unit: "台",
        },
        {
          icon: require("@/assets/images/icon/icon-all-3.png"),
          name: "总发电功率",
          num: "314",
          unit: "kw",
        },
        {
          icon: require("@/assets/images/icon/icon-all-4.png"),
          name: "总发电量",
          num: "314",
          unit: "kw/h",
        },
        {
          icon: require("@/assets/images/icon/icon-all-5.png"),
          name: "减排二氧化碳总量",
          num: "314",
          unit: "㎡",
        },
        {
          icon: require("@/assets/images/icon/icon-all-6.png"),
          name: "节约标煤总量",
          num: "314",
          unit: "吨",
        },
      ],
      tableData: [
        {
          ranking: "1",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "2",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "3",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "4",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "5",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "6",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "7",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
        {
          ranking: "8",
          name: "xxx电场",
          power: "xxxkWh",
          time: "xxx小时",
        },
      ],
      leftThreeValue: "1",
      nianXlValue: 1,
      yueXlValue: 1,
      nianXlValue1: 1,
      yueXlValue1: 1,
      nianXlValue2: 1,
      yueXlValue2: 1,
      leftThreeOptions: [
        {
          value: "1",
          label: "龙双电场",
        },
        {
          value: "2",
          label: "全部",
        },
      ],
      dldbX: ['2021年', '2022年', '2023年', '2024年', '2025年'],
      dldbY1: [0, 0, 0, 0, 330],
      dldbY2: [0, 0, 0, 0,  290],
      dxsX: ['2021年', '2022年', '2023年', '2024年', '2025年'],
      dxsY: [0, 0, 0, 0, 150],
      glycX: ['2021年', '2022年', '2023年', '2024年', '2025年'],
      glycY1: [0, 0, 0, 0, 230],
      glycY2: [0, 0, 0, 0, 240],
      glycY3: [0, 0, 0, 0, 213],
      fsbhX: ['2021年', '2022年', '2023年', '2024年', '2025年'],
      fsbhY: [0, 0, 0, 0, 6],
    };
  },
  methods: {
    dldb() {
      // 电量对比分析
      this.barChart = echarts.init(this.$refs.barChart)
      const barOption = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        animation: false,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // 距离顶部 20px
          top: '30px',
          data: ['理论发电量', '实际发电量'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: 70,
          left: 30,
          right: 40,
          bottom: 30,
        },
        xAxis: {
          type: 'category',
          data: this.dldbX,
          axisLine: {
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)',        // 最下方实线颜色
              width: 1                 // 线宽建议设置为2更明显
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },
        },

        title: {
          text: '',
          subtext: '单位：万kwh',
          top: 20,
          left: 20
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {             // 显示分割线
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)', // 虚线颜色
              type: 'dashed',          // 虚线类型
              width: 1                 // 线宽
            }
          }
        },
        series: [
          {
            name: '理论发电量',
            type: 'bar',
            barWidth: 10,
            data: this.dldbY1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1A74DC' },
                { offset: 1, color: 'rgba(26, 116, 220, 0)' }
              ])
            },
          },
          {
            name: '实际发电量',
            type: 'bar',
            barWidth: 10,
            data: this.dldbY2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#48D07D' },
                { offset: 1, color: 'rgba(72, 208, 125, 0.01)' }
              ])
            },
          }
        ]
      }
      this.barChart.setOption(barOption)
    },
    dlss() {
      // 电量损失分析
      this.pieChart = echarts.init(this.$refs.pieChart)
      const pieOption = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} kwh ({d}%)',
          backgroundColor: 'rgba(16, 22, 58, 0.9)',
          borderColor: '#36a2eb',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        legend: {
          show: true,
          orient: 'vertical',
          right: '6%',
          top: '50%',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemGap: 20,
          itemWidth: 14,
          itemHeight: 14
        },
        series: [
          {
            name: '能耗损失',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 0,
              borderColor: 'rgba(16, 22, 58, 0.9)',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{c} kwh',
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 22
            },
            labelLine: {
              length: 20,
              length2: 15,
              smooth: true,
              lineStyle: {
                width: 2,
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            emphasis: {
              label: {
                fontSize: 16,
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: [
              {
                value: 129, name: '能耗损失', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0.2, color: 'rgba(236, 194, 73, 0.3)' },
                      { offset: 0.75, color: '#ECC249' }
                    ],
                    angle: 53
                  }
                }
              },
              {
                value: 129, name: '弃风损失', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0.14, color: '#1A72D9' },
                      { offset: 0.94, color: 'rgba(26, 114, 217, 0.3)' }
                    ],
                    angle: 358
                  }
                }
              },
              {
                value: 129, name: '其他损失', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0.07, color: '#47CC7C' },
                      { offset: 0.8, color: 'rgba(71, 204, 124, 0.3)' }
                    ],
                    angle: 97
                  }
                }
              }
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '42%',
            style: {
              text: '778',
              textAlign: 'center',
              fill: '#fff',
              fontSize: 36,
              fontWeight: 'bold',
              fontFamily: 'Arial'
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '55%',
            style: {
              text: 'kwh',
              textAlign: 'center',
              fill: '#fff',
              fontSize: 16,
              fontWeight: 'bold',
              fontFamily: 'Arial'
            }
          }
        ]
      };

      this.pieChart.setOption(pieOption)
    },
    dxs() {
      // 等效时分析
      this.lineChart = echarts.init(this.$refs.lineChart)
      const lineChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 212, 255, 0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0, 212, 255, 0.3)'
            }
          }
        },
        title: {
          text: '',
          subtext: '单位：h',
          top: 10,
          left: 20
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '4%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.dxsX,
          axisLine: {
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.4)',        // 最下方实线颜色
              width: 1                 // 线宽建议设置为2更明显
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          // 新增分割线配置
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {             // 显示分割线
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)', // 虚线颜色
              type: 'dashed',          // 虚线类型
              width: 1                 // 线宽
            }
          }
        },
        series: [{
          name: '等效小时',
          type: 'line',
          data: this.dxsY,
          symbol: 'circle',
          symbolSize: 10,
          lineStyle: {
            width: 4,
            shadowColor: 'rgba(0, 212, 255, 0.5)',
            shadowBlur: 15,
            shadowOffsetY: 10
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00d4ff' },
              { offset: 1, color: '#0a7ee3' }
            ])
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 212, 255, 0.4)' },
              { offset: 1, color: 'rgba(10, 126, 227, 0.1)' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: '#fff',
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: 'rgba(255, 235, 59, 0.5)',
              shadowBlur: 10
            }
          },
          animation: true,
          animationDuration: 2000,
          animationEasing: 'cubicOut'
        }]
      };
      this.lineChart.setOption(lineChart)
    },
    glyc() {
      // 功率预测与限电分析
      this.glChart = echarts.init(this.$refs.glChart)
      const glChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        title: {
          text: '',
          subtext: '单位：万kw',
          top: 10,
          left: 20
        },
        legend: {
          data: ['实际功率', '预测功率', '调度下发功率'],
          textStyle: {
            color: "#ffffff",
          },
          itemGap: 40,
          top: 34,
          right: 0,
          itemHeight: 5,
          itemWidth: 20,
          backgroundColor: "#0AA7FF4D",
          animation: true,
          animationDurationUpdate: 800
        },
        grid: {
          top: 75,
          left: 35,
          right: 10,
          bottom: 30,
        },
        xAxis: {
          type: "category",
          // 关键修改1：为每个月份创建3个位置点
          data: this.glycX,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#ffffff",
          },
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut'
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#999999",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#B0D7FF33",
            },
          },
          animation: true,
          animationDuration: 1000
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = `<div style="margin-bottom:5px;font-weight:bold">${params[0].axisValueLabel.replace(/(\d+月).*/, '$1')}</div>`;
            params.forEach(item => {
              if (item.value) {
                result += `
            <div style="display:flex;align-items:center;margin:3px 0;">
              <span style="display:inline-block;width:10px;height:10px;background:${item.color};border-radius:50%;margin-right:5px;"></span>
              <span>${item.seriesName}: <b>${item.value}万kw</b></span>
            </div>
          `;
              }
            });
            return result;
          },
          animation: true,
          enterable: true
        },
        series: [
          {
            name: '实际功率',
            type: 'bar',
            barWidth: 8,
            data: this.glycY1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#e9c047' },
                { offset: 1, color: '#23252b' }
              ])
            },
          },
          {
            name: '预测功率',
            type: 'bar',
            barWidth: 8,
            data: this.glycY2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#48D07D' },
                { offset: 1, color: 'rgba(72, 208, 125, 0.01)' }
              ])
            },
          },
          {
            name: '调度下发功率',
            type: 'bar',
            barWidth: 8,
            data: this.glycY3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#b6a2de' },
                { offset: 1, color: '#ded3f4' }
              ])
            },
          }
        ],
        graphic: {
          elements: [{
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '数据加载中...',
              fontSize: 20,
              fontWeight: 'bold',
              fill: '#fff'
            },
            invisible: true
          }]
        }
      };
      this.glChart.setOption(glChart)
    },
    nhfx() {
      // 能耗分析
      this.nhChart = echarts.init(this.$refs.nhChart)
      const nhChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        title: {
          text: '',
          subtext: '单位：万kwh',
          top: 15,
          left: 20
        },
        grid: {
          top: 45,
          left: 20,
          right: 120,
          bottom: 30,
        },
        xAxis: {
          type: "value",
          nameTextStyle: {
            color: "#999999",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#B0D7FF33",
            },
          },
          axisLabel: {
            show: false,
          },
          animation: true,
          animationDuration: 1000
        },
        yAxis: {
          position: 'right',  // 文字靠左显示
          type: "category",
          // 关键修改1：为每个月份创建3个位置点
          data: ['厂用电量', '集电线路能耗', '购网电量', '综合厂用电量'],
          axisTick: {
            show: false,
          },
          axisLabel: {
            width: 80,
            color: "#ffffff",
            position: 'right',  // 文字靠左显示
            align: 'left',     // 左对齐
            margin: 10,
            padding: [6, 5, 6, 5],
            backgroundColor: ' rgba(10, 167, 255, 0.1)',
            borderRadius: 0,
            rich: {
              a: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            formatter: function (value) {
              return '{a|' + value + '}';
            }

          },
          axisLine: {
            show: true
          },
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = `<div style="margin-bottom:5px;font-weight:bold">${params[0].axisValueLabel.replace(/(\d+月).*/, '$1')}</div>`;
            params.forEach(item => {
              if (item.value) {
                result += `
            <div style="display:flex;align-items:center;margin:3px 0;">
              <span style="display:inline-block;width:10px;height:10px;background:${item.color};border-radius:50%;margin-right:5px;"></span>
              <span>${item.value}kW</b></span>
            </div>
          `;
              }
            });
            return result;
          },
          animation: true,
          enterable: true
        },
        series: [

          {
            // 关键修改3：只在每个月的第一个位置显示数据
            data: [120, 132, 101, 134],
            type: "bar",
            symbol: "rect",
            symbolRepeat: "fixed",
            symbolMargin: 3,
            symbolClip: true,
            symbolSize: [3, 10],
            // 关键修改4：设置柱宽和间距
            // 显示背景条
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(23, 150, 254, 0.1)',
              borderRadius: [0, 4, 4, 0]
            },
            barWidth: 17,
            barGap: '10%',
            barCategoryGap: '20%',
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#e9c047' },
                { offset: 1, color: '#00D78C' }
              ])
            },
            z: 10,
            animation: true
          }
        ],
        graphic: {
          elements: [{
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '数据加载中...',
              fontSize: 20,
              fontWeight: 'bold',
              fill: '#fff'
            },
            invisible: true
          }]
        }
      };
      this.nhChart.setOption(nhChart)

    },
    fsbh() {
      // 风速变化分析
      this.fsChart = echarts.init(this.$refs.fsChart)
      const fsChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 212, 255, 0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0, 212, 255, 0.3)'
            }
          }
        },
        title: {
          text: '',
          subtext: '单位：m/s',
          top: 10,
          left: 20
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '4%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.fsbhX,
          axisLine: {
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.4)',        // 最下方实线颜色
              width: 1                 // 线宽建议设置为2更明显
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          // 新增分割线配置
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {             // 显示分割线
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)', // 虚线颜色
              type: 'dashed',          // 虚线类型
              width: 1                 // 线宽
            }
          }
        },
        series: [{
          smooth: 0.3,  // 值越大曲线越平滑
          name: '平均风速',
          type: 'line',
          data: this.fsbhY,
          symbol: 'circle',
          symbolSize: 10,
          lineStyle: {
            width: 4,
            shadowColor: 'rgba(0, 212, 255, 0.5)',
            shadowBlur: 15,
            shadowOffsetY: 10
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#47CC7C' },
              { offset: 1, color: 'rgba(71, 204, 124, 0.3)' }
            ])
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(71, 204, 124, 0.4)' },
              { offset: 1, color: 'rgba(71, 204, 124, 0.1)' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: '#fff',
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: 'rgba(255, 235, 59, 0.5)',
              shadowBlur: 10
            }
          },
          animation: true,
          animationDuration: 2000,
          animationEasing: 'cubicOut'
        }]
      };
      this.fsChart.setOption(fsChart)


    },
    fspl() {
      // 风速频率与风能频率对比
      this.plChart = echarts.init(this.$refs.plChart)
      const plChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // 距离顶部 20px
          right: 30,
          top: '0px',
          data: ['风速频率', '风能频率'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: 40,
          left: 30,
          right: 40,
          bottom: 30,
        },
        xAxis: {
          type: 'category',
          data: ['<1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '>13'],
          axisLine: {
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)',        // 最下方实线颜色
              width: 1                 // 线宽建议设置为2更明显
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },
        },
        yAxis: {
          name: '频率%',
          type: 'value',
          nameTextStyle: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {             // 显示分割线
            lineStyle: {
              color: 'rgba(176, 215, 255, 0.2)', // 虚线颜色
              type: 'dashed',          // 虚线类型
              width: 1                 // 线宽
            }
          }
        },
        series: [
          {
            name: '风速频率',
            type: 'bar',
            barWidth: 5,
            data: [4, 5, 3, 6, 9, 6, 7, 4, 8, 3, 5, 8, 5],
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1A74DC' },
                { offset: 1, color: 'rgba(26, 116, 220, 0)' }
              ])
            },
          },
          {
            name: '风能频率',
            type: 'bar',
            barWidth: 5,
            data: [3, 6, 2, 8, 4, 6, 3, 7, 5, 8, 4, 3,4],
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: 'rgba(236, 194, 73, 0.3)' },
                { offset: 0, color: '#ECC249' }
              ])
            },
          }
        ]
      }
      this.plChart.setOption(plChart)

    },
    fxmg() {
      // 风向玫瑰图
      this.fxChart = echarts.init(this.$refs.fxChart)
      const fxChart = {
        backgroundColor: 'transparent',
        animation: true,
        animationEasing: 'elasticOut',

        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params);

            // 假设只有一个系列，且系列名称为'风向频率(%)'
            const directions = ['北', '西北', '东', '东南', '南', '西南', '西', '东北'];
            // 判断 params 是对象还是数组
            let data;
            let seriesName;
            console.log(Array.isArray(params));

            if (params.name == '') {
              // 多系列情况，这里我们只取第一个系列的数据（根据你的需求）
              data = params.data;
              seriesName = params.seriesName;
            } else {
              data = params.data;
              seriesName = params.name;
            }
            let str = seriesName + '<br/>';
            data.value.forEach((val, idx) => {
              str += `${directions[idx]}：${val}<br/>`;
            });
            return str;
          }
        },

        legend: {
          data: ['风向频率(%)', '平均风速(m/s)'],
          textStyle: {
            color: "#ffffff",
          },
          top: 24,
          right: 30,
          orient: 'horizontal',
          width: '30%', // 限制宽度
        },

        title: {
          text: '',
          subtext: '静风频率为8.4%',
          top: 20,
          left: 20
        },

        radar: {
          radius: '60%',
          center: ['50%', '56%'],
          indicator: [
            { seriesName: '（4.5/3.1）<br/>北', max: 100, name: '北' },
            { seriesName: '（3.8/2.9）<br/>西北', max: 100, name: '北' },
            { seriesName: '（5.2/4.1）<br/>东', max: 100, name: '北' },
            { seriesName: '（4.1/3.3）<br/>东南', max: 100, name: '北' },
            { seriesName: '（3.5/2.8）<br/>南', max: 100, name: '北' },
            { seriesName: '（4.2/3.0）<br/>西南', max: 100, name: '北' },
            { seriesName: '（4.8/3.5）<br/>西', max: 100, name: '北' },
            { seriesName: '（4.0/3.2）<br/>东北', max: 100, name: '北' }
          ],
          axisName: {
            color: '#fff',
            fontSize: 12,
            rich: {
              a: { color: '#0AA7FF', fontSize: 12, align: 'center' },
              b: { color: '#48D07D', fontSize: 12, align: 'center' },
              c: { color: '#fff', fontSize: 12, align: 'center', lineHeight: 20 }
            },
            formatter: function (value, dd) {
              const match = dd.seriesName.match(/（([^/]+)\/([^）]+)）<br\/>(.+)/);
              if (match) {
                return [
                  '{a|' + match[1] + '}',
                  '{b|' + match[2] + '}',
                  '{c|' + match[3] + '}'
                ].join('/') + '\n';
              }
              return value;
            }
          },
          axisLine: { lineStyle: { color: '#192F51' } },
          splitLine: { lineStyle: { color: '#192F51' } },
          splitArea: { show: true, areaStyle: { color: 'transparent' } }
        },

        series: [
          {
            type: 'radar',
            name: '风向频率(%)',
            data: [{
              value: [80, 50, 60, 70, 40, 30, 90, 85],
              itemStyle: { color: 'rgba(56, 0, 255, 0.0001)' },
              lineStyle: { width: 2, color: '#0AA7FF' },
              areaStyle: { color: 'rgba(0, 112, 255, 0.6)' }
            }],
          },
          {
            type: 'radar',
            name: '平均风速(m/s)',
            data: [{
              value: [4, 89, 60, 75, 40, 30, 55, 99],
              itemStyle: { color: 'rgba(0, 215, 140, 0.0001)' },
              lineStyle: { width: 2, color: '#00D78C' },
              areaStyle: { color: 'rgba(0, 215, 140, 0.6)' }
            }]
          }
        ]
      };
      this.fxChart.setOption(fxChart)
    },
    one() {
      console.log(this.tabPosition);

      this.dldbA = false,
        setTimeout(() => {

          this.dldbA = true
          setTimeout(() => {
            if (this.tabPosition == 1) {
              this.dldbX = ['2021年', '2022年', '2023年', '2024年', '2025年']
              this.dldbY1 = [0, 0, 0, 0, 330]
              this.dldbY2 = [0, 0, 0, 0,  290]
            } else if (this.tabPosition == 2) {
              this.dldbX = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              this.dldbY1 = [220, 182, 191, 234, 290, 330, 455, 765, 0, 0, 0, 0]
              this.dldbY2 = [180, 132, 171, 224, 260, 210, 422, 703, 0, 0, 0, 0]
            } else if (this.tabPosition == 3) {
              const days = [];
              const date = new Date();

              for (let i = 6; i >= 0; i--) {
                const tempDate = new Date();
                tempDate.setDate(date.getDate() - i);
                const day = tempDate.getDate();
                days.push(`${day}日`);
              }

              this.dldbX = days
              this.dldbY1 = [220, 182, 191, 234, 290, 330, 455]
              this.dldbY2 = [170, 132, 171, 214,270, 310, 422]
            }
            this.dldb()
          }, 400);
        }, 300);
    },
    two() {
      this.dlssA = false,
        setTimeout(() => {

          this.dlssA = true
          setTimeout(() => {
            this.dlss()
          }, 400);
        }, 300);
    },
    two1() {
      this.dlssA = false,
        setTimeout(() => {

          this.dlssA = true
          setTimeout(() => {
            this.dlss()
          }, 400);
        }, 300);
    },
    three() {
      this.dxsA = false,
        setTimeout(() => {

          this.dxsA = true
          setTimeout(() => {
            if (this.tabPosition1 == 1) {
              this.dxsX = ['2021年', '2022年', '2023年', '2024年', '2025年']
              this.dxsY = [0, 0, 0, 0, 150]
            } else if (this.tabPosition1 == 2) {
              this.dxsX = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              this.dxsY = [220, 182, 191, 234, 290, 330, 455, 765, 0, 0, 0, 0]
            } else if (this.tabPosition1 == 3) {
              const days = [];
              const date = new Date();

              for (let i = 6; i >= 0; i--) {
                const tempDate = new Date();
                tempDate.setDate(date.getDate() - i);
                const day = tempDate.getDate();
                days.push(`${day}日`);
              }

              this.dxsX = days
              this.dxsY = [220, 182, 191, 234, 290, 330, 455]
            }
            this.dxs()
          }, 400);
        }, 300);
    },
    four() {
      this.glycA = false,
        setTimeout(() => {

          this.glycA = true
          setTimeout(() => {
            if (this.tabPosition2 == 1) {
              this.glycX = ['2021年', '2022年', '2023年', '2024年', '2025年']
              this.glycY1 = [0, 0, 0, 0, 230]
              this.glycY2 = [0, 0, 0, 0, 240]
              this.glycY3 = [0, 0, 0, 0, 213]
            } else if (this.tabPosition2 == 2) {
              this.glycX = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              this.glycY1 = [220, 182, 191, 234, 290, 330, 34, 53, 0, 0, 0, 0]
              this.glycY2 = [247, 200, 221, 250, 310, 340, 60, 80, 0, 0, 0, 0]
              this.glycY3 = [200, 170, 175, 191, 247, 273, 45, 30, 0, 0, 0, 0]
            } else if (this.tabPosition2 == 3) {
              const days = [];
              const date = new Date();

              for (let i = 6; i >= 0; i--) {
                const tempDate = new Date();
                tempDate.setDate(date.getDate() - i);
                const day = tempDate.getDate();
                days.push(`${day}日`);
              }

              this.glycX = days
              this.glycY1 = [120, 182, 191, 234, 290, 330, 355]
              this.glycY2 = [140, 200, 229, 270, 310, 350, 380]
              this.glycY3 = [96, 123, 175, 191, 427, 273, 325]
            }
            this.glyc()
          }, 400);
        }, 300);
    },
    five() {
      this.nhfxA = false,
        setTimeout(() => {

          this.nhfxA = true
          setTimeout(() => {
            this.nhfx()
          }, 400);
        }, 300);
    },
    five1() {
      this.nhfxA = false,
        setTimeout(() => {

          this.nhfxA = true
          setTimeout(() => {
            this.nhfx()
          }, 400);
        }, 300);
    },
    six() {
      this.fsbhA = false,
        setTimeout(() => {

          this.fsbhA = true
          setTimeout(() => {
            if (this.tabPosition3 == 1) {
              this.fsbhX = ['2021年', '2022年', '2023年', '2024年', '2025年']
              this.fsbhY = [0, 0, 0, 0, 6]
            } else if (this.tabPosition3 == 2) {
              this.fsbhX = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              this.fsbhY = [3, 5, 2, 7, 6, 3, 5, 4, 0, 0, 0, 0]
            }
            this.fsbh()
          }, 400);
        }, 300);
    },
    seven() {
      this.fxmgA = false,
        setTimeout(() => {

          this.fxmgA = true
          setTimeout(() => {
            this.fxmg()
          }, 400);
        }, 300);
    },
    seven1() {
      this.fxmgA = false,
        setTimeout(() => {

          this.fxmgA = true
          setTimeout(() => {
            this.fxmg()
          }, 400);
        }, 300);
    },
    // 点最上面下拉
    topD() {
      console.log(321);

      this.dldbA = false,
        this.dlssA = false,
        this.dxsA = false,
        this.glycA = false,
        this.nhfxA = false,
        this.fsbhA = false,
        this.fsplA = false,
        this.fxmgA = false,
        setTimeout(() => {

          this.dldbA = true,
            this.dlssA = true,
            this.dxsA = true,
            this.glycA = true,
            this.nhfxA = true,
            this.fsbhA = true,
            this.fsplA = true,
            this.fxmgA = true
          setTimeout(() => {
            this.dldb()
            this.dlss()
            this.dxs()
            this.glyc()
            this.nhfx()
            this.fsbh()
            this.fspl()
            this.fxmg()
          }, 400);
        }, 300);
    },





    handleClick(index) {
      this.activeIndex = index;
      this.openTable();
    },
    // 年月日时分秒
    updateDateTime() {
      const now = new Date();

      // 格式化日期（YYYY-MM-DD 星期X）
      const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}-${month}-${day} ${weekday}`;

      // 格式化时间（HH:MM:SS）
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    openTable1() {
      this.dialogVisible1 = true;
    },
    openTable() {
      this.dialogVisible = true;
    },
    tabsFun(i) {
      this.tabIdx = i;
      this.$router.push(this.tablist[i].path);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "odd";
      }
      return "";
    },
    fenbu(i) {
      this.fenbuIdx = i;
    },
    goToDetail() {
      this.$router.push({
        path: this.fenbuIdx == 1 ? "/detection" : "/detection-fen",
      });
    },
    // 定时器15分钟加载一次
    // 增强版数据刷新方法
    async refreshData() {
      try {
        await Promise.all([
          this.dldbA = false,
          this.dlssA = false,
          this.dxsA = false,
          this.glycA = false,
          this.nhfxA = false,
          this.fsbhA = false,
          this.fsplA = false,
          this.fxmgA = false,
          this.$nextTick(() => {
            this.dldbA = true
            this.dlssA = true
            this.dxsA = true
            this.glycA = true
            this.nhfxA = true
            this.fsbhA = true
            this.fsplA = true
            this.fxmgA = true
            setTimeout(() => {
              this.dldb()
              this.dlss()
              this.dxs()
              this.glyc()
              this.nhfx()
              this.fsbh()
              this.fspl()
              this.fxmg()
            }, 300);
          })
        ]);
        console.log('数据刷新成功', new Date().toLocaleString());
      } catch (error) {
        console.error('数据刷新失败:', error);
      }
    },

    // 初始化定时器
    initRefreshTimer() {
      // 先清除旧定时器
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }
      // 设置定时器 (1分钟)
      this.refreshInterval = setInterval(() => {
        this.refreshData();
      }, 60000);
    }
  },
  mounted() {
    // 初始化定时刷新
    this.initRefreshTimer();

    this.dldb(),
      this.dlss(),
      this.dxs(),
      this.glyc(),
      this.nhfx(),
      this.fsbh(),
      this.fspl(),
      this.fxmg(),
      // 初始更新
      this.updateDateTime();

    // 每秒更新一次
    this.timer = setInterval(this.updateDateTime, 1000);
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  width: 100%;
  height: 100%;
  background-color: #000f21;
  position: relative;
}

.headerBox {
  background-image: url("~@/assets/images/windPower/titleMax.png");
  background-size: 100% 100%;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  width: 100%;
  position: relative;
  z-index: 99;
  overflow: hidden;

  /* 确保光束不会溢出 */
  /* 光束元素样式 */
  .light-beam {
    position: absolute;
    top: 0;
    left: -80%;
    /* 初始位置在左侧外部 */
    width: 100px;
    height: 3px;
    background: linear-gradient(to left,
        #ffffff,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.2),
        transparent);

    transform: skewX(-20deg);
    /* 使光束倾斜 */
    animation: beam-scan 5s linear infinite;
    z-index: 1;
  }

  /* 光束动画 */
  @keyframes beam-scan {
    0% {
      left: -50%;
      opacity: 0;
      top: 63px;
    }

    20% {
      opacity: 0.8;
      top: 63px;
    }

    40% {
      opacity: 0.8;
      top: 63px;
    }

    43% {
      opacity: 0;
      top: 63px;

    }

    46% {
      opacity: 0;
      top: 63px;

    }

    47% {
      opacity: 0.8;
      top: 14px;
    }

    80% {
      opacity: 0.8;
      top: 14px;
    }

    90% {
      opacity: 0.8;
      top: 14px;
    }

    100% {
      left: 100%;
      opacity: 0;
      top: 14px;
    }
  }

  /* 确保标题内容在光束之上 */
  .headerBox>* {
    position: relative;
    z-index: 2;
  }

  .tabsBox {
    width: 45%;

    .tabsItemBg {
      background-image: url("~@/assets/images/windPower/tabs.png");
      background-size: 100% 100%;
      height: 40px;
      color: #45a2ff;
      position: relative;

      .down_line {
        display: none;
        position: absolute;
        background-image: url("~@/assets/images/windPower/select-tabs.png");
        background-size: 100% 100%;
        width: 80%;
        height: 33px;
        top: 22px;
      }
    }

    .tabsItemBg:hover {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }

    .selectTabsItemBg {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }
  }
}

.cblue {
  color: #45a2ff;
}

.cwhite {
  color: #ffffff;
}

.cgray {
  color: #999999;
}

.chartBox {
  margin-top: 40px;
  height: calc(100% - 131px);
  position: relative;
  z-index: 1;

  .chartTile {
    color: #ffffff;
    width: 100%;
    height: 100%;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 10px;

    // 光束样式
    .light-beam {
      top: -10px;
      position: absolute;
      height: 8.2%;
      width: 200px;
      background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(0, 170, 255, 0.6) 30%,
          rgba(0, 170, 255, 0.3) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: skewX(-20deg);
      z-index: 1;
      margin-top: -1.5px;
    }

    // 第一条光束
    .beam-1 {
      top: -4px;
      left: -8%;
      animation: beam-sweep 4s ease-in-out infinite;
    }

    // 第二条光束
    .beam-2 {
      top: -4px;
      left: -5%;
      animation: beam-sweep 4s ease-in-out infinite 2s;
    }

    // 光束动画
    @keyframes beam-sweep {
      0% {
        left: -8%;
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      70% {
        opacity: 0.8;
      }

      80% {
        left: 55%;
        opacity: 0.3;
      }

      90% {
        opacity: 0;
        left: 55%;
      }

      100% {
        left: 55%;
        opacity: 0;
      }
    }
  }

  .icon-electricity {
    color: #0aa7ff;
    background-image: url("~@/assets/images/icon/icon-electricity.png");
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
  }
}

.leftThreeSelect {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
}

.leftThreeSelect1 {
  position: relative;
  top: 90px;
  left: 20px;
  width: 230px;
}

.ppo {
  position: absolute;
  left: -3px;
  top: 19px;
  width: 32px;
  height: 6px;
  transform: rotate(90deg);
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: undefined;
  justify-content: undefined;
  align-items: undefined;
  padding: NaNpx;

  background: #C2DEFF;

  box-shadow: 0px 0px 11.89px 0px #3183FF;

}

.oop {
  border: 1px solid #4299FF;
  position: absolute;
  left: 15.2px;
  top: 0px;
  width: 99.02%;
  height: 43px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: undefined;
  justify-content: undefined;
  align-items: undefined;
  padding: NaNpx;

  background: rgba(27, 126, 242, 0.098);

  box-shadow: inset 0px 0px 11.89px 0px rgba(66, 153, 255, 0.8);

  .el-input--medium .el-input__inner {

    height: 50px;
    line-height: 50px;
  }

}

.tabSelect {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  margin: auto;
  width: 95%;

  .el-radio-group {
    width: 95.5%;
    display: flex;
    justify-content: space-between;

    label {
      width: 29%;
    }

    .el-radio-button__inner {
      width: 100% !important;
    }
  }

  .el-select {
    display: flex !important;
    justify-content: space-between !important;
    width: 47.2% !important;
    margin: 0 5px !important;

    label {
      width: 29%;
    }

    .el-radio-button__inner {
      width: 100% !important;
    }
  }
}

.tabSelect1 {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  margin: auto;
  width: 95%;

  .el-radio-group {
    width: 95.5%;
    display: flex;
    justify-content: space-between;

    label {
      width: 49%;
    }

    .el-radio-button__inner {
      width: 100% !important;
    }
  }

  .el-select {
    display: flex !important;
    justify-content: space-between !important;
    width: 47.2% !important;
    margin: 0 5px !important;

    label {
      width: 29%;
    }

    .el-radio-button__inner {
      width: 100% !important;
    }
  }
}

.flex3 {
  flex: 0 0 33.33%;
}

.cockpitCon {
  background-image: url("~@/assets/images/windPower/cockpitCon.png");
  background-size: 100% 100%;
}

.cockpitConFjfb {
  background-image: url("~@/assets/images/windPower/cockpitConFjfb.png");
  background-size: 100% 100%;
}

.contentTitle {
  background-image: url("~@/assets/images/windPower/distribution.png");
  background-size: 100% 100%;
  height: 45px;

  .conTitleBtn {
    width: 280px;
    margin-bottom: 16px;
  }

  .distributionSel {
    background-image: url("~@/assets/images/windPower/distributionSel.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionSelLeft {
    background-image: url("~@/assets/images/windPower/distributionSelLeft.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionBlue {
    background-image: url("~@/assets/images/windPower/distributionBlue.png");
    background-size: 100% 100%;
    height: 45px;
  }

  .distributionRight {
    background-image: url("~@/assets/images/windPower/distributionRight.png");
    background-size: 100% 100%;
    height: 45px;
  }
}

.gjjcBox {
  .gjjcBg {
    background-image: url("~@/assets/images/icon/icon-rt-bg.png");
    background-size: 100% 100%;
    padding: 15px;
  }
}

.rel {
  position: relative;
}

.echartImg {
  background-image: url("~@/assets/images/icon/icon-ro.png");
}

.leftBox {
  width: 100%;
}

.concentBox {
  width: calc(100% - 980px);
}

.righBox {
  width: 450px;

  .icon-ro {
    color: #0aa7ff;
    background-image: url("~@/assets/images/icon/icon-ro.png");
    background-size: 100% 100%;
    height: 50px;
    width: 50px;
  }

  .rsubtex {
    position: absolute;
    left: 30px;
    width: 50px;
  }

  .icon-rt-bg {
    background-image: url("~@/assets/images/icon/icon-rt-bg.png");
    background-size: 100% 100%;
    padding: 15px;
  }
}

.rankingBg {
  background-image: url("~@/assets/images/icon/rankingBg.png");
  background-size: 100% 100%;
  height: 80px;
}

.rankingBgBlue {
  background-image: url("~@/assets/images/icon/rankingBgBlue.png");
  background-size: 100% 100%;
  height: 80px;
}

//radio
::v-deep .el-radio-button--medium .el-radio-button__inner {
  padding: 7px 15px;
  border-radius: 0px;
}

::v-deep .el-radio-button {
  margin-left: 10px;
}

::v-deep .el-radio-button__inner {
  background-color: #0aa7ff1a;
  color: #ffffff;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
}

::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  border: none !important;
  box-shadow: none !important;
  border-top: 2px solid #0aa7ff !important;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
}

// select选择框
::v-deep .el-select-dropdown {
  background-color: rgba(1, 28, 82, 0.8);
  border: none;
}

::v-deep .el-input__inner {
  color: #0aa7ff;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
  padding-right: 10px;
  padding-left: 10px;
}

::v-deep .el-popper .popper__arrow {
  border-bottom-color: #0aa7ff;
}

::v-deep .leftThreeSelect1 .el-input--medium {
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.1em;

  font-variation-settings: "opsz" auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #C2F1FA 100%);
  -webkit-background-clip: text;

}

::v-deep .leftThreeSelect1 .el-select .el-input .el-select__caret {
  color: #FFD15C;
  font-size: 18px;
  font-weight: bold;
}

::v-deep .el-popper .popper__arrow::after {
  border-bottom-color: #0aa7ff;
}

::v-deep .el-select .el-input .el-input__inner {
  border: none;
  border-radius: 0;
}

::v-deep .el-select-dropdown__item {
  background-color: rgba(1, 28, 82, 0.8);
  color: #0aa7ff;
}

::v-deep .el-select-dropdown__item.selected {
  color: #ffffff;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  background-color: #0aa7ff66;
}

::v-deep .leftThreeSelect1 .el-input--medium .el-input__inner {
  height: 41px;
  line-height: 41px;
}

::v-deep .tabSelect .el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
  border: 1px solid rgba(30, 123, 214, 0.8);
  background: linear-gradient(180deg, rgba(15, 74, 159, 0) 0%, rgba(17, 75, 160, 0.949) 137%);
}

::v-deep .el-input--medium .el-input__icon {
  line-height: 30px;
}

.df {
  display: flex;
}

.dfBetween {
  justify-content: space-between;
}

.w100 {
  width: 100%;
}

.w33 {
  position: relative;
  width: 24%;
  background-image: url("~@/assets/images/icon/bt.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
</style>
